<template>
    <div>
        <el-card>
            <el-tabs v-model="tabsActive">
                <el-tab-pane label="商户进件" name="商户进件">
                    <el-alert style="margin-bottom:10px;" title="进件流程：商户进件->上传图片->产品开通（扫码/刷卡【被扫】），微信公众号需要额外调用微信进件接口->签署电子协议" type="error"></el-alert>
                    <el-form label-width="200px">
                        <el-form-item label="商户号：" v-if="intoFrom.mch_id">
                            <span>{{intoFrom.mch_id}}</span>
                            <el-button size="mini" @click="intoQuery">查询结果</el-button>
                        </el-form-item>
                        <el-form-item label="商户名称：">
                            <span>{{intoFrom.signName}}</span>
                        </el-form-item>
                        <el-form-item label="商户简称：">
                            <span>{{intoFrom.showName}}</span>
                        </el-form-item>
                        <el-form-item label="商户类型：">
                            <span v-if="intoFrom.merchantType==1">企业商户</span>
                            <span v-else-if="intoFrom.merchantType==2">事业单位商户</span>
                            <span v-else-if="intoFrom.merchantType==3">个体工商户</span>
                            <span v-else-if="intoFrom.merchantType==4">个人商户</span>
                            <span v-else-if="intoFrom.merchantType==5">自然人</span>
                            <span v-else>其他组织</span>
                        </el-form-item>
                        <el-form-item label="证件类型：">
                            <span>{{intoFrom.showName}}</span>
                        </el-form-item>
                        <el-form-item label="法人名字：">
                            <span>{{intoFrom.legalPerson}}</span>
                        </el-form-item>
                        <el-form-item label="法人身份证号：">
                            <span>{{intoFrom.legalPersonID}}</span>
                        </el-form-item>
                        <el-form-item label="组织机构代码：">
                            <span>{{intoFrom.orgNum}}</span>
                        </el-form-item>
                        <el-form-item label="营业执照号：">
                            <span>{{intoFrom.businessLicense}}</span>
                        </el-form-item>
                        <el-form-item label="行业类型：">
                            <span>{{intoFrom.webIndustryTypeCode}}</span>
                        </el-form-item>
                        <el-form-item label="通讯地址：">
                            <span>{{intoFrom.address}}</span>
                        </el-form-item>
                        <el-form-item label="行业类型：">
                            <el-select v-model="intoFrom.industryTypeCode" placeholder="请选择" :popper-append-to-body="false">
                                <el-option v-for="item in indTypeList" :key="item.code" :label="item.label" :value="item.value+''"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="区县编码：">
                            <el-cascader ref="myCascader" :show-all-levels="false" v-model="intoFrom.regionCode" :options="regionList" placeholder="请选择" :props="props"></el-cascader>
                        </el-form-item>
                        <el-form-item label="经营类别：">
                            <span>{{intoFrom.webMerchantCategory}}</span>
                        </el-form-item>
                        <el-form-item label="联系人：">
                            <span>{{intoFrom.linkman}}</span>
                        </el-form-item>
                        <el-form-item label="经营类别：">
                            <el-select v-model="intoFrom.merchantCategory" placeholder="请选择" :popper-append-to-body="false">
                                <el-option v-for="item in busTypeList" :key="item.code" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="联系电话：">
                            <span>{{intoFrom.linkPhone}}</span>
                        </el-form-item>
                        <el-form-item label="联系邮箱：">
                            <span>{{intoFrom.email}}</span>
                        </el-form-item>
                        <el-form-item label="开户账号：">
                            <span>{{intoFrom.accountNo}}</span>
                        </el-form-item>
                        <el-form-item label="开户名：">
                            <span>{{intoFrom.accountName}}</span>
                        </el-form-item>
                        <el-form-item label="结算卡联行号：">
                            <span>{{intoFrom.bankCode}}</span>
                        </el-form-item>
                        <el-form-item label="结算类型：">
                            <span>{{intoFrom.settlementPeriod}}</span>
                        </el-form-item>
                        <el-form-item label="结算卡类型：">
                            <span>{{intoFrom.settleBankType}}</span>
                        </el-form-item>
                        <el-form-item label="商户费率：">
                            <span>{{intoFrom.serviceRate}}</span>
                        </el-form-item>
                        <el-form-item label="确认费率：">
                            <el-input v-model="intoFrom.serviceRate"></el-input>
                        </el-form-item>
                        <el-form-item class="btns-center">
                            <el-button type="primary" @click="intoConfirm(intoFrom)">进件</el-button>
                        </el-form-item>
                    </el-form>
                    <el-dialog title="进件结果" :visible.sync="intoResultdialogVisible" :before-close="handleClose">
                        <div>
                            <el-form :model="queryResult">
                                <el-form-item label="进件商户：" class="dialog-form-item">
                                    <span>{{queryResult.signName}}</span>
                                </el-form-item>
                                <el-form-item label="展示名称：" class="dialog-form-item">
                                    <span>{{queryResult.showName}}</span>
                                </el-form-item>
                                <el-form-item label="进件状态：" class="dialog-form-item">
                                    <span v-if="queryResult.status=='INIT'">待审核</span>
                                    <span v-else-if="queryResult.status=='OVERRULE'">申请驳回</span>
                                    <span v-else-if="queryResult.status=='AUDITED'">审核通过</span>
                                </el-form-item>
                                <el-form-item label="审核结果：" class="dialog-form-item">
                                    <span>{{queryResult.msg}}</span>
                                </el-form-item>
                            </el-form>
                        </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="intoResultdialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="intoResultdialogVisible = false">确 定</el-button>
                        </span>
                    </el-dialog>
                </el-tab-pane>
                <el-tab-pane label="电子签约" name="电子签约">
                    <Signing v-if="tabsActive=='电子签约'" :info="intoFrom" :id="newId"></Signing>
                </el-tab-pane>
                <el-tab-pane v-loading="UpImgLoading" element-loading-text="努力上传中" label="图片上传" name="图片上传">
                    <UpImg v-if="tabsActive=='图片上传'" v-on:setLoadingStatus="setLoadingStatus" :id="newId" :imgList="intoFrom.file" ></UpImg>
                </el-tab-pane>
                <el-tab-pane label="支付开通" name="支付开通">
                    <PayOpen v-if="tabsActive=='支付开通'" :id="newId"></PayOpen>
                </el-tab-pane>
                <el-tab-pane label="微信支付进件" name="微信支付进件">
                    <WxInto v-if="tabsActive=='微信支付进件'" :id="newId"></WxInto>
                </el-tab-pane>
                <el-tab-pane label="变更商户名" name="变更商户名">
                    <SetName v-if="tabsActive=='变更商户名'" :id="newId" :oldSignName="intoFrom.signName" :oldShowName="intoFrom.showName" v-on:getChannelIntoInfo="getChannelIntoInfo"></SetName>
                </el-tab-pane>
                <el-tab-pane label="变更结算信息" name="变更结算信息">
                    <ChangeInfo v-if="tabsActive=='变更结算信息'" :id="newId"></ChangeInfo>
                </el-tab-pane>
                <el-tab-pane label="新增授权目录" name="新增授权目录">
                    <AddDir v-if="tabsActive=='新增授权目录'" :id="newId"></AddDir>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>
import PayOpen from "./hl-other/pay-open";
import Signing from "./hl-other/signing";
import UpImg from "./hl-other/up-img";
import WxInto from "./hl-other/wx-into";
import SetName from "./hl-other/set-name";
import ChangeInfo from './hl-other/change-info';
import AddDir from './hl-other/add-dir';
export default {
    components: {
        PayOpen,
        Signing,
        UpImg,
        WxInto,
        SetName,
        ChangeInfo,
        AddDir
    },
    data() {
        return {
            newId: 0,
            type: 1,
            tabsActive: '商户进件',
            // 渠道列表
            channelList: [],
            props: {
                emitPath: false,
                value: 'code',
                label: 'name',
                children: 'children'
            },
            // 查询结果的dialog显隐
            intoResultdialogVisible: false,
            queryResult: {},
            intoFrom: {},
            // 经营类型选择
            busTypeList: [],
            // 行业类型选择
            indTypeList: [],
            // 区县类型编码
            regionList: [],
            // 图片上传tab-pane面板的加载
            UpImgLoading:false,
            rules: {
                regionCode: {
                    required: true,
                    message: "区县编码不能为空",
                    trigger: "change",
                },
                industryTypeCode: {
                    required: true,
                    message: "行业类型编码不能为空",
                    trigger: "change",
                },
                merchantCategory: {
                    required: true,
                    message: "经营类别不能为空",
                    trigger: "change",
                },
            },
        };
    },
    created(e) {
        this.newId = Number(this.$route.query.id);
        this.getBusTypeList();
        this.getIndTypeList();
        this.getRegionList();
        this.getChannelIntoInfo();
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        // 进件结果查询
        intoQuery() {
            // 1.打开弹框
            this.intoResultdialogVisible = true;
            // 2.调用请求 在请求里赋值
            this.intoOther(1);

        },
        // 进件后续的一些操作
        intoOther(genre) {
            let _this = this;
            this.$axios({
                url: '/admin/channel/other',
                data: {
                    type: _this.type,
                    userID: _this.newId,
                    genre: genre
                },
                success(res) {
                    console.log(res)
                    if (res.data.code == 200) {
                        _this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        _this.queryResult = res.data.content.data;
                    }
                }
            });
        },
        // 得到渠道进件信息
        getChannelIntoInfo() {
            let _this = this;
            this.$axios({
                url: '/admin/channel/into',
                data: {
                    userID: _this.newId,
                    type: _this.type
                },
                success(res) {
									console.log(res.data.content)
                    if (res.data.code == 200) {
                        _this.intoFrom = res.data.content;
                    } else if (res.data.code == 0) {
                        _this.$message.error(res.data.msg);
                        _this.$router.go(-1);
                    } else {
                        _this.$message.error(res.data.msg);
                    }
                }
            });
        },
        // 获取经营类型选项
        async getBusTypeList() {
            let _this = this;
            this.$axios({
                url: '/admin/conf/getCategory',
                data: {
                    type: _this.type
                },
                success(res) {
                    if (res.data.code === 200) {
                        _this.busTypeList = res.data.content;
                    }
                }
            });
        },
        // 获取行业类型选择
        async getIndTypeList() {
            let _this = this;
            this.$axios({
                url: '/admin/conf/getIndustry',
                data: {
                    type: _this.type,
                },
                success(res) {
                    console.log(res);
                    if (res.data.code === 200) {
                        _this.indTypeList = res.data.content;
                    }
                }
            });
        },
        // 获取省市区编码
        async getRegionList() {
            let _this = this;
            this.$axios({
                url: '/admin/conf/getArea',
                data: {
                    type: _this.type,
                    parent_code: 0
                },
                success(res) {
                    if (res.data.code === 200) {
                        _this.regionList = res.data.content;
                    }
                }
            });
        },
        intoConfirm(form) {
            let _this = this;
            this.$axios({
                url: '/admin/channel/channelInfo',
                data: {
                    userID: _this.newId,
                    type: _this.type,
                    service_rate: form.serviceRate,
                    direct_data: form
                },
                success(res) {
                    if (res.data.code === 200) {
                        _this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        _this.$message.error(res.data.msg);
                    }
                }
            });
        },
        setLoadingStatus(e){
            this.UpImgLoading=e;
        }
    },
};
</script>

<style scoped>
.title {
    padding: 20px 0;
    font-size: 20px;
    text-align: center;
}
.nav {
    width: 200px;
}
.el-tab-pane {
    height: 600px;
    overflow: auto;
}
.el-form-item {
    width: 50%;
    float: left;
}
.el-input {
    width: 300px !important;
}
.btns-center {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
}
.dialog-form-item {
    width: 100%;
}
</style>
